<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/css/searchDocs.css" />
        <script src="/lib/js/marked.min.js"></script>
        <script src="/lib/js/jquery.min.js"></script>
        <link href="/lib/css/monokai-sublime.min.css"  rel="stylesheet" />
        <link href="/lib/pnotify/pnotify.custom.min.css"  rel="stylesheet" />
        <link href="/lib/bootstrap/bootstrap.css"  rel="stylesheet" />
        <script src="/lib/pnotify/pnotify.custom.min.js"></script>
        <link href="/lib/loading/css/loading.css"  rel="stylesheet" />
        <script src="/lib/loading/js/loading.js"></script>
        <script src="/lib/js/highlight.min.js"></script>
        <script src="/js/util.js"></script>
    </head>
    <body>
        <div class="searchDocsBox">
            <div class="addDocsTitle"><i class="fa fa-file-text-o fa-lg"></i>查看接口文档 <a href="/index"><span><i class="fa fa-mail-reply-all  fa-lg"></i>返回首页</span></a></div>
            <div class="docsMenuBox">
                <% for(var i=0;i<menuData.length;i++){ %>
                    <div class="docsMenuItem">
                        <div class="docsMenuItemCategory"><%- menuData[i].dc_name %></div>
                        <div class="docsMenuItemContent">
                            <% for(var k=0;k<menuData[i].docsData.length;k++){ %>
                                <div class="docsMenuItemText" id="<%- menuData[i].docsData[k].d_id %>"><%- menuData[i].docsData[k].d_name %></div>
                            <% } %>
                        </div>
                    </div>
                <% } %>
            </div>
            <div class="docsMenuContent">
                <div class="noDocsBox"><i class="fa fa-folder-o fa-lg"></i>请先选择要查看的文档</div>
                <div class="docsMain">
                        <div class="docsMenuContentItem">
                                <div class="docsMenuContentItemTitle"><i class="fa fa-circle fa-lg"></i>接口名称</div>
                                <div class="docsMenuContentItemText" id="name"></div>
                            </div>
                            <div class="docsMenuContentItem">
                                    <div class="docsMenuContentItemTitle"><i class="fa fa-circle fa-lg"></i>接口地址</div>
                                    <div class="docsMenuContentItemText" id="api"></div>
                            </div>
                            <div class="docsMenuContentItem">
                                    <div class="docsMenuContentItemTitle"><i class="fa fa-circle fa-lg"></i>请求方式</div>
                                    <div class="docsMenuContentItemText" id="method"></div>
                            </div>
                            <div class="docsMenuContentItem">
                                    <div class="docsMenuContentItemTitle"><i class="fa fa-circle fa-lg"></i>描述信息</div>
                                    <div class="docsMenuContentItemText" id="desc"></div>
                            </div>
                            <div class="docsMenuContentItem">
                                    <div class="docsMenuContentItemTitle"><i class="fa fa-circle fa-lg"></i>备注信息</div>
                                    <div class="docsMenuContentItemText" id="note"></div>
                            </div>
                            <div class="docsMenuContentItem">
                                    <div class="docsMenuContentItemTitle"><i class="fa fa-circle fa-lg"></i>GET 请求参数</div>
                                    <div class="docsMenuContentItemParams getParams">
                                        <div class="docsMenuContentItemParamsHeader">
                                            <span>参数名称</span>
                                            <span>是否必传</span>
                                            <span>验证规则</span>
                                            <span>参数说明</span>
                                        </div>
                                        <div class="docsMenuContentItemParamsGetMain">

                                        </div>
                                        
                                    </div>
                            </div>
                            <div class="docsMenuContentItem">
                                    <div class="docsMenuContentItemTitle"><i class="fa fa-circle fa-lg"></i>POST 请求参数</div>
                                    <div class="docsMenuContentItemParams postParams">
                                        <div class="docsMenuContentItemParamsHeader">
                                            <span>参数名称</span>
                                            <span>是否必传</span>
                                            <span>验证规则</span>
                                            <span>参数说明</span>
                                        </div>
                                        <div class="docsMenuContentItemParamsPostMain">

                                        </div>
                                        
                                    </div>
                            </div>
                            <div class="docsMenuContentItem">
                                    <div class="docsMenuContentItemTitle"><i class="fa fa-circle fa-lg"></i>返回结果</div>
                                    <div class="docsMenuContentItemResult" id="result">
                                       
                                    </div>
                            </div>
                </div>
            </div>
        </div>
    </body>
    <script>

        $(function(){

            $(".docsMenuItemCategory").click(function(){

               var childCount = $(this).next().children().length;

               if(childCount > 0) {

                //判断是否隐藏
                if($(this).next().is(':hidden')){
                    $(this).next().slideDown(200);
                }else{
                    $(this).next().slideUp(200);
                }

               }
 
            });

            $(".docsMenuItemText").click(function(){
                    
                    var d_id = $(this).attr("id");

                    POP.startLoading();

                    HTTP.post("/docs/search", {d_id : d_id}, (rs) => {

                        POP.endLoading();

                        $("#name").html(rs.apiData.d_name);
                        $("#api").html(rs.apiData.d_api);
                        $("#method").html(rs.apiData.d_method);
                        $("#desc").html(rs.apiData.d_desc);
                        $("#note").html(rs.apiData.d_note);
                        $("#result").html(marked(rs.apiData.d_result));
                        $('pre code').each(function(i, block) {
                            hljs.highlightBlock(block);
                        });

                        //创建GET请求参和POST请求参
                        var getHTML = "";
                        if(rs.getParams.length>0){

                            for(var i=0;i<rs.getParams.length;i++){
                                getHTML += `
                                    <div class="docsMenuContentItemParamsHeader" style="background:#fff;color:#666;">
                                        <span>${rs.getParams[i].drp_name}</span>
                                        <span>${rs.getParams[i].drp_is_must}</span>
                                        <span>${rs.getParams[i].drp_rule}</span>
                                        <span>${rs.getParams[i].drp_note}</span>
                                    </div>
                                `;
                            }

                        }else{

                            getHTML += `
                                <div class="docsMenuContentItemParamsHeader" style="background:#fff;color:#666;padding-left:36px;">
                                    无请求参数信息
                                </div>
                            `;

                        }
                        
                        $(".docsMenuContentItemParamsGetMain").html(getHTML);

                        var postHTML = "";
                        if(rs.postParams.length>0){

                            for(var i=0;i<rs.postParams.length;i++){
                                postHTML += `
                                    <div class="docsMenuContentItemParamsHeader" style="background:#fff;color:#666;">
                                        <span>${rs.postParams[i].drp_name}</span>
                                        <span>${rs.postParams[i].drp_is_must}</span>
                                        <span>${rs.postParams[i].drp_rule}</span>
                                        <span>${rs.postParams[i].drp_note}</span>
                                    </div>
                                `;
                            }

                        }else{

                            postHTML += `
                                <div class="docsMenuContentItemParamsHeader" style="background:#fff;color:#666;padding-left:36px;">
                                    无请求参数信息
                                </div>
                            `;

                        }
                        $(".docsMenuContentItemParamsPostMain").html(postHTML);

                        $(".noDocsBox").hide();
                        $(".docsMain").fadeIn(200);

                    });

            });

        });


        
    </script>
</html>
